import { Box } from '@chakra-ui/react';

import IAIScrollArea from 'common/components/IAIScrollArea';
import { useAppSelector } from 'app/store/storeHooks';

import Prompt from './Prompt';
import SelectedTags from './SelectedTags';

const SelectedPromptTags = () => {
  const { promptTags, negativePromptTags } = useAppSelector(
    (store) => store.tag
  );

  return (
    <IAIScrollArea h="full">
      <Box
        h={{ base: 'max-content', md: '100%' }}
        w={{ base: '100%', md: '350px' }}
        px="2"
        flexShrink={0}
        gridArea="selected"
      >
        <SelectedTags tags={promptTags} />
        <SelectedTags tags={negativePromptTags} type="negative" />
        <Prompt />
      </Box>
    </IAIScrollArea>
  );
};

export default SelectedPromptTags;
